<script setup>
/**
 * 实体店店铺评论
 * **/
import { ref, onMounted, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import {
  getShopEvaluateListByItemId,
  deleteShopEvaluate,
} from "@/server/api/Confirm";
import { useUseStore } from "@/stores/user";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const use = useUseStore();

const route = useRoute();

const CommentCount = ref(0); // 评论数量
const CommentList = ref([]); //商品评论列表
const shopId = ref();
// 删除评论
const Delete = (evaluateId) => {
  console.log(evaluateId);
  console.log(use.userId);

  deleteShopEvaluate(evaluateId, use.userId).then((res) => {
    console.log(res.data);
    if (res.data.code == 200) {
      // 根据实体店id获取实体店评价列表
      getShopEvaluateListByItemId(1, 10, shopId.value).then((res) => {
        console.log(res.data.data);
        CommentCount.value = res.data.data.count;
        CommentList.value = res.data.data.list;
      });
    }
  });
};
onBeforeMount(() => {
  shopId.value = route.query.shopId;
});
onMounted(() => {
  // 根据实体店id获取实体店评价列表
  getShopEvaluateListByItemId(1, 10, shopId.value).then((res) => {
    console.log(res.data.data);
    CommentCount.value = res.data.data.count;
    CommentList.value = res.data.data.list;
  });
});
</script>

<template>
  <div class="contain">
    <!-- 导航栏 -->
    <div class="nav">
      <div class="left" @click="$router.back()">
        <img src="/images/cart/back.png" />
      </div>
      <div class="title">
        {{ $t("item.details.comment") }}
        ({{ CommentCount > 99 ? "99+" : CommentCount }})
      </div>
    </div>

    <!-- 全部评论 -->
    <div class="commentBox">
      <div class="allComment">
        {{ $t("item.details.comment") }}
        <span>{{ CommentCount }}</span>
      </div>
      <!-- 评论列表 -->
      <div class="commentItem" v-for="item of CommentList" :key="item.evaluateId">
        <div class="top">
          <img :src="item.userImage" alt="" />
          <div class="right">
            <div class="nickName">{{ item.userName }}</div>
            <div class="time">{{ item.createTime }}</div>
          </div>
        </div>
        <div class="commentContent">
          <p>{{ item.evaluate }}</p>
        </div>
        <div class="delete" v-if="item.userId == use.userId" @click.stop="Delete(item.evaluateId)">
          ⅹ
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
// 容器
.contain {
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 1);
  font-family: "PingFang SC";
}

// 导航栏
.nav {
  height: 24rem;
  padding: 24rem 16rem;
  display: flex;

  position: sticky;
  z-index: 999;

  background-color: rgba(255, 255, 255, 1);

  .left {
    width: 24rem;
    height: 24rem;
    line-height: 24rem;
    text-align: center;

    img {
      width: 6rem;
      height: 12rem;
    }
  }

  .title {
    height: 28rem;
    margin-left: 117rem;
    font-size: 16rem;
    font-weight: 500;
    line-height: 28rem;
    text-align: center;
    color: rgba(102, 102, 102, 1);
  }
}

// 占位
.Placeholder1 {
  height: 104rem;
}

// 商品信息
.CommodityInfo {
  width: 390rem;
  height: 98rem;
  background: rgba(245, 245, 245, 1);
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 999;

  img {
    width: 64rem;
    height: 74rem;
    border-radius: 8rem;
    margin: 12rem 12rem 12rem 24rem;
  }

  .box {
    width: 290rem;
    height: 74rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    .title {
      height: 22rem;
      font-size: 16rem;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }

    .walk {
      font-size: 13rem;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }

    .price {
      font-size: 14rem;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);

      span {
        font-size: 14rem;
        font-weight: 500;
        color: rgba(100, 46, 142, 1);
        margin-left: 4rem;
      }
    }

    .sale {
      position: absolute;
      right: 24rem;
      bottom: 0;
      font-size: 12rem;
      font-weight: 400;
      color: rgba(204, 204, 204, 1);
    }
  }
}

// 全部评论
.commentBox {
  padding: 0 16rem 30rem;

  margin-top: 16rem;

  .allComment {
    font-size: 16rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    padding-bottom: 16rem;

    span {
      font-size: 14rem;
      margin-left: 4rem;
    }
  }

  .commentItem {
    width: 100%;
    margin-top: 10rem;
    position: relative;

    .top {
      height: 40rem;
      width: 100%;
      display: flex;

      img {
        width: 40rem;
        height: 40rem;
        border-radius: 50%;
        object-fit: cover;
      }

      .right {
        margin-left: 10rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .nickName {
          font-size: 15rem;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }

        .time {
          font-size: 13rem;
          font-weight: 400;
          color: rgba(204, 204, 204, 1);
        }
      }
    }

    .commentContent {
      width: 100%;
      // min-height: 92rem;
      // max-height: 128rem;
      margin-top: 14rem;
      border-bottom: 1rem solid rgba(230, 230, 230, 1);
      padding-bottom: 14rem;

      p {
        width: 100%;
        min-height: 40rem;
        max-height: 156rem;
        font-size: 15rem;
        font-weight: 500;
        line-height: 20rem;
        color: rgba(51, 51, 51, 1);
        // 超出隐藏
        word-break: keep-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        overflow: hidden;
        box-sizing: content-box;
        text-align: justify;
        word-wrap: break-word;
      }
    }

    .delete {
      position: absolute;
      top: 8rem;
      right: 12rem;
      width: 18rem;
      height: 18rem;
      border-radius: 50%;
      border: 1rem solid rgba(100, 46, 142, 1);
      line-height: 16rem;
      text-align: center;
      font-size: 14rem;
    }
  }
}
</style>
